<div nz-row>
  <div nz-col [nzOrder]="formOrder" [nzXXl]="12" [nzXl]="12" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24">
    <form [nzLayout]="'horizontal'" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label nzSpan="12" nzRequired nzFor="cnName">化学品中文名</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="化学品中文名">
          <input nz-input formControlName="cnName" id="cnName" placeholder="化学品中文名"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="enName">化学品英文名</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="化学品英文名">
          <input nz-input formControlName="enName" id="enName" placeholder="化学品英文名"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="formula">分子式</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="分子式">
          <input nz-input formControlName="formula" id="formula" placeholder="分子式"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="construction">结构式</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl">
          <nz-upload
            (nzChange)="uploadFn($event)"
            [nzRemove]="handleRemove.bind(this)"
            [nzLimit]="1"
            [nzName]="'picture'"
            [nzAction]="uploadUrl"
            nzListType="picture-card"
            [(nzFileList)]="fileList"
            [nzShowButton]="fileList.length < 1"
            [nzShowUploadList]="showUploadList"
            [nzPreview]="handlePreview.bind(this)">
            <i nz-icon nzType="plus"></i>
            <div class="ant-upload-text">上传</div>
          </nz-upload>
          <input nz-input formControlName="construction" placeholder="图片" [hidden]="true">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="entprName">生产企业名称</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="生产企业名称">
          <input nz-input formControlName="entprName" id="entprName" placeholder="生产企业名称"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="entprAddress">地址</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="地址">
          <input nz-input formControlName="entprAddress" id="entprAddress" placeholder="地址"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="entprPhone">电话</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="电话">
          <input nz-input formControlName="entprPhone" id="entprPhone" placeholder="电话"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="entprFax">传真</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="传真">
          <input nz-input formControlName="entprFax" id="entprFax" placeholder="传真"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="effectDate">生效日期</nz-form-label>
        <nz-form-control nzSpan="12" nzErrorTip="生效日期">
          <nz-date-picker formControlName="effectDate" id="effectDate" placeholder="生效日期" nzAllowClear></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="entprEmergentPhone">企业应急电话</nz-form-label>
        <nz-form-control nzSpan="12" [nzErrorTip]="combineTpl">
          <input nz-input formControlName="entprEmergentPhone" id="entprEmergentPhone" placeholder="企业应急电话"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="12" nzFor="countryEmergentPhone">国家应急电话</nz-form-label>
        <nz-form-control nzSpan="12" [nzErrorTip]="combineTpl">
          <input nz-input formControlName="countryEmergentPhone" id="countryEmergentPhone" placeholder="国家应急电话"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="AdminService.isAdmin" nz-row class="register-area">
        <nz-form-control [nzSpan]="12" [nzOffset]="12">
          <button nz-button nzType="primary">确定</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
          (nzOnCancel)="previewVisible = false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
  </ng-template>
</nz-modal>
<ng-template #combineTpl let-control>
  <ng-container *ngIf="control.hasError('message')">{{control.errors['message']}}</ng-container>
  <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
</ng-template>

